<template>
<div class="Box" @click="setDetails(item.cat_id)">
  <div class="imgbox">
    <img :src="item.cat_icon" alt="">
  </div>
  <div class="text">
    {{item.cat_name}}
  </div>
  <div class="minbox">
   <div class="minleft">
     <img :src="item.cat_icon" alt="">
     <span>657890</span>
   </div>
    <div class="minright">
     <div class="box">
       <van-icon name="good-job-o" />{{item.cat_pid}}
     </div>
    </div>
  </div>
</div>
</template>

<script>
export default {
  name: "item",
  props:{
    item:{
      type:Object,
      default:{}
    }
  },
  methods:{


    setDetails(id){
      this.$router.push({
        path:"/newList",
        query:{id}
      })
    }
  }
}
</script>

<style scoped lang="scss">
.Box{
  -webkit-column-break-inside: avoid;
  display:flex;
  border-radius:10px;
  margin:10px;
  padding:10px;
  justify-content:flex-start;
  overflow:hidden;
  box-shadow:
      4.5px 4.7px 2.2px rgba(0, 0, 0, 0.005),
      6.9px 7.2px 5.3px rgba(0, 0, 0, 0.011),
      9px 9.4px 10px rgba(0, 0, 0, 0.02),
      11.4px 11.9px 17.9px rgba(0, 0, 0, 0.032),
      15.1px 15.7px 33.4px rgba(0, 0, 0, 0.059),
      25px 26px 80px rgba(0, 0, 0, 0.16)
;
  flex-direction:column;
  margin:8px 4px;
  .imgbox{
    width:100%;
    height:100%;
    img{
      border-radius:10px;

      width: 100%;
      height: 100%;
    }
  }
  .text{
    text-indent:.1em;
    padding:10px 0;
    font-size:20px
  }
  .minbox{
    display: flex;
    justify-content:space-between;
    .minleft{
      img{width:24px;height:24px;border-radius:50%;border:1px rgba(0,0,0,.3) solid}
      span{font-size:18px;position: relative;top:-6px;left:6px}
    }
    .minright{
      align-items: center;
      text-align: center;
      display:flex;
      font-size:18px;
      justify-content:space-between;
       .box{
         margin-right:4px;
        padding:2px 10px;
        border:1px silver solid;
        border-radius:20px;
      }
    }

  }

}
</style>